.story-card {
  position: relative;
  width: 254px;
  padding: 10px 12px;
  border: 1px solid #F2F2F2;
  border-radius: 8px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding-bottom: 36px;
  transition: all 0.3s;
  .story-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    padding: 4px 10px;
    border-radius: 6px 2px 6px 2px;
    font-size: 12px;
    text-align: center;
    background: rgba(255, 123, 0, 0.1);
    color: #FF7B00;
    &.status_5 {
      background: linear-gradient(0deg, rgba(24, 144, 255, 0.1), rgba(24, 144, 255, 0.1)), #FFF;
      color: #1890FF;
    }
    &.status_4 {
      background: rgba(40, 179, 145, 0.1);
      color: #28B391;
    }
    &.status_11 {
      background: rgba(176, 115, 246, 0.1);
      color: #B073F6;
    }
    &.status_10 {
      background: rgba(255, 123, 0, 0.1);
      color: #FF7B00;
    }
  }
  .story-name {
    font-size: 14px;
    font-weight: 600;
    width: 230px;
    height: 42px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #595959;
    word-break: break-all;
    margin-bottom: 8px;
    cursor: pointer;
  }
  .story-count {
    display: inline-block;
    width: 50px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
  }
  .story-time {
    margin-bottom: 4px;
    color: #737373;
  }

  .story-project-text {
    color: #737373;
  }
}

.story-card:hover {
  box-shadow: 0px 0px 16px 0px rgba(24, 144, 255, 0.15);
}
